<template>
     <!--引入container布局-->
    <el-container class="hom-container">
        <!--头部-->
        <el-header>
            <span class="text-font">欢迎来到教学管理系统</span>
              <el-button type="primary" round>超级管理员</el-button>
            <el-button type="danger" round @click="logout">安全退出</el-button>
        </el-header>
        <!--主体-->
        <el-container>
        <!--侧边栏-->
            <el-aside width="200px">
                <el-menu 
                background-color="#545c64"
                text-color="#fff" 
                active-text-color="#409eff" 
                :router="true" 
                :default-active="activePath">
                    <el-submenu :index="item.path" v-for="item in menuList" :key="item.id">
                        <!--一级菜单-->
                        <template slot="title">
                            <i :class="isconsObject[item.id]"></i>
                            <span>{{item.title}}</span>
                        </template>
                        <!--二级菜单-->
                        <el-menu-item 
                        :index="s.path" 
                        v-for="s in item.sList" 
                        :key="s.id" 
                        @click="saveNavState(s.path)">
                            <template slot="title">
                                <i :class="isconsObject[s.id]"></i>
                                <span>{{s.title}}</span>
                            </template>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <!--主体内容-->
            <el-main>
            <!--编写一个路由 子组件-->
                <router-view></router-view>
            </el-main>
    </el-container>
</el-container>
</template>
<script>
export default {
    data(){
        return {
            // 菜单列表
            menuList:[
                {"id":100,"path": "/information", "title": "个人信息", "sList":[
                    {"id": 101, "path":"/changePwd", "title":"修改密码"},
                    {"id": 102, "path": "/again", "title": "重新登录"},

                ]},
                {"id":200,"path": "/course", "title": "课程教学", "sList":[
                    {"id": 201, "path":"/addCourse", "title":"添加课程"},
                    {"id": 202, "path": "/listCourse", "title": "课程管理"},

                ]},
                {"id":300,"path": "/admin", "title": "教务管理", "sList":[
                    {"id": 301, "path":"/addCollege", "title":"添加学院"},
                    {"id": 302, "path": "/addMajor", "title": "添加专业"},
                    {"id": 303, "path":"/addTeacher", "title":"添加教师"},
                    {"id": 304, "path": "/addStudent", "title": "添加学生"},
                ]},
            ],
            // 控制列表显示或隐藏
            isCollapse:true,
            // 图像
            isconsObject: {
                100: 'iconfont icon-xuesheng',
                200: 'iconfont icon-guanliyuan_guanliyuanrizhi',
                300: 'iconfont icon-xuexiao_jiaoshi',
                101: 'iconfont icon-xueshengguanli',
                102: 'iconfont icon-guanliyuanchaxun',
                201: 'iconfont icon-guanliyuancaozuo',
                202: 'iconfont icon-yanzhengma54',
                301: 'iconfont icon-guanliyuan1',
                302: 'iconfont icon-guanliyuan',
                303: 'iconfont icon-yanzhengma5',
                304: 'iconfont icon-guanliyuanqiehuan',
            },
            activePath: '/admin', //默认路径
        }
    },
    // 类似onload 事件, 页面一加载就会触发
    created(){
        // 页面刷新的时候, 取出session的path 动态修改activePath
        this.activePath = window.sessionStorage.getItem("activePath");
    },
    methods: {
        // 安全退出
        logout(){
            window.sessionStorage.clear();
            this.$router.push("/login");
        },
        // 控制伸缩
        toggleCollapase(){
            // 显示或者隐藏按钮
            this.isCollapse = !this.isCollapse;
        },
        // 页面的记忆功能 saveNavState 保存路径
        saveNavState(activePath){
            // 设置session  用户点击就将页面信息存放在session中
            window.sessionStorage.setItem("activePath", activePath);
            this.activePath = activePath;
        }
    }
}
</script>
<style>

.el-header{
    background-color: #373d41;
    display: flex;
    justify-content: space-between;
    padding-left: 0%;
    align-items: center;
    color: #fff;
    font-size: 20px;
    display:flex;
    align-items: center;
}
span{
    margin-left: 8px;
}
.el-aside{
    background-color: #333744;
}
.el-main{
    background-color: #eaedf1;
}
.hom-container{
    height:100%;
}
.el-menu{
    border-right: none;
}
.toggle-buttom{
    background-color: #4A5064;
    font-size: 10px;
    line-height: 24px;
    color: #fff;
    text-align: center;
    letter-spcing: 0.2em;
    cursor: pointer;
}
</style>